<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css" id="theme">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
		<style type="text/css">
			.animate1{

			}
			.animate2{

			}
			.animate3{
				position: absolute;
				top: 1.5rem;
				left: 3rem;
				width: 1rem;
				height: 1rem;
			}

			.animateSvg{}
			.animatePath{}
			.animateSvg2{}
			.animatePath2{
				display: -webkit-box;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				flex-direction: column;
				position: relative;
				width: 100%;
				min-height: 8rem;
				margin-bottom: 1rem;
				padding: 1rem;
			}
			.square {
				width: 2rem;
				height: 2rem;
				margin: .5rem;

			}
			.animate-margin {
				margin-left: 21rem;

			}
			.blue{
				background-color: #206EFF;
			}
			.green{
				background-color: #31FFA6;
			}
			.red{
				background-color: #ff524b;
			}

			rectangle {}
		</style>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>

				<section>
					<div style="display: flex ;justify-content:center; flex-direction: column ">
						<span>
							<div class="animate1 blue square animate-margin"></div>
							<div class="animate1 green square animate-margin"></div>
							<div class="animate1 red  square animate-margin"></div>
						</span>

						<span>Slide 2</span>
					</div>

				</section>
				<section >
					<div class="animate2 blue square animate-margin"></div>
					<div class="animate2 green square animate-margin"></div>
					<div class="animate2 red  square animate-margin"></div>
					<span>Slide 3</span>
				</section>
				<section>
					<svg class="animateSvg" width="252px" height="94px" viewBox="3 11 252 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
						<desc>Created with Sketch.</desc>
						<defs></defs>
						<path d="M4,80.3307481 L4,103.14209" id="Stroke-3-Copy-2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M12,80.3307481 L12,103.14209" id="Stroke-3-Copy" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M20,80.3307481 L20,103.14209" id="Stroke-3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M28,79.2468955 L28,103.14209" id="Stroke-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M36,78.1629412 L36,103.14209" id="Stroke-5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M44,75.4792747 L44,103.14209" id="Stroke-6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M52,72.7420239 L52,103.14209" id="Stroke-7" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M60,69.5063186 L60,103.14209" id="Stroke-8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M68,66.251244 L68,103.14209" id="Stroke-9" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M76,61.8968703 L76,103.14209" id="Stroke-10" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M84,58.6428398 L84,103.14209" id="Stroke-11" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M92,55.3517013 L92,103.14209" id="Stroke-12" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M100,52.1459205 L100,103.14209" id="Stroke-13" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M108,49.9758708 L108,103.14209" id="Stroke-14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M116,49.9648003 L116,103.14209" id="Stroke-15" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M124,52.0421408 L124,103.14209" id="Stroke-16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M132,54.207588 L132,103.14209" id="Stroke-17" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M140,57.4549402 L140,103.14209" id="Stroke-18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M148,59.7410947 L148,103.14209" id="Stroke-19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M156,60.7705138 L156,103.14209" id="Stroke-20" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M164,59.6868773 L164,103.14209" id="Stroke-21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M172,56.4734051 L172,103.14209" id="Stroke-22" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M180,49.799018 L180,103.14209" id="Stroke-23" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M188,42.3419581 L188,103.14209" id="Stroke-24" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M196,35.8617977 L196,103.14209" id="Stroke-25" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M204,29.3524204 L204,103.14209" id="Stroke-26" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M212,23.9352737 L212,103.14209" id="Stroke-27" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M220,19.5951742 L220,103.14209" id="Stroke-28" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M228,18.5101493 L228,103.14209" id="Stroke-29" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M236,16.3400995 L236,103.14209" id="Stroke-30" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M244,14.1700498 L244,103.14209" id="Stroke-31" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
						<path d="M252,12 L252,103.14209" id="Stroke-32" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
					</svg>
				</section>


<!--				<section data-background-iframe="./examples/follow-svg-pathanime-js/dist/index.html">-->

<!--				</section>-->
				<section data-background-iframe="./examples/runaway-button/dist/index.html">

				</section>
				<section data-background-iframe="./examples/day-night-toggle/dist/index.html">

				</section>
				<section data-background-iframe="./examples/flower-timeline/dist/index.html">

				</section>

				<section data-background-iframe="./examples/academy/dist/index.html">

				</section>

				<section data-background-iframe="./examples/404-error-page/dist/index.html">

				</section>

			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script src="js/anime/anime.min.js"></script>
		<script>

			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes,anime ]

			});
			var myAnimation = anime({
				targets: ['.animate1'],
				translateX: '20rem',
				rotate: 180,
				borderRadius: '8px',
				duration: 2000,
				loop: true
			});
			var animationAlterante = anime({
				targets: '.animate2',
				translateX: '13.5rem',
				scale: [.75, .9],
				borderRadius: ['0%', '50%'],
				delay: function(el, index) {
					return index * 1000;
				},
				direction: 'alternate',
				loop: true
			});

			var animateWave = anime({
				targets: '.animateSvg path',
				strokeDashoffset: function(el) {
					var pathLength = el.getTotalLength();
					el.setAttribute('stroke-dasharray', pathLength);
					return [-pathLength, 0];
				},
				stroke: {
					value: function(el, i) {
						return 'rgb(200,'+ i * 8 +',150)';
					},
					easing: 'linear',
					duration: 2000,
				},
				strokeWidth: {
					value: 6,
					easing: 'linear',
					delay: function(el, i) {
						return 1200 + (i * 40);
					},
					duration: 800,
				},
				delay: function(el, i) {
					return i * 60;
				},
				duration: 1200,
				easing: 'easeOutExpo',
				loop: true,
				direction: 'alternate'
			});


			var myPath = anime.path('.animatePath2 path');

			console.log(myPath)
			anime({
				targets: '.animate3',
				translateX: myPath('x'),
				translateY: myPath('y'),
				rotate: myPath('angle'),
				duration: 2000,
				loop: true,
				easing: 'linear'
			});

			anime({
				targets: '.animatePath2 path',
				opacity: 0,
				duration: 6000,
				loop: true,
				direction: 'alternate',
				easing: 'easeInOutExpo'
			});

		</script>
	</body>
</html>
